import 'package:flutter/widgets.dart';
import 'package:mpcore/mpkit/mpkit.dart';

final _tabDatas = [
  'Home',
  'Cart',
  'News',
];

class TabPage extends StatefulWidget {
  @override
  _TabPageState createState() => _TabPageState();
}

class _TabPageState extends State<TabPage> {
  int currentPage = 0;

  @override
  Widget build(BuildContext context) {
    return MPScaffold(
      name: 'TabPage',
      backgroundColor: Color.fromARGB(255, 236, 236, 236),
      appBar: _TabBar(
        currentPage: currentPage,
        onChangePage: (nextPage) {
          setState(() {
            this.currentPage = nextPage;
          });
        },
      ),
      body: (() {
        switch (currentPage) {
          case 0:
            return _Page0();
          case 1:
            return _Page1();
          case 2:
            return _Page2();
          default:
            return _Page0();
        }
      })(),
    );
  }
}

class _TabBar extends StatelessWidget implements PreferredSizeWidget {
  final int currentPage;
  final Function(int)? onChangePage;

  _TabBar({required this.currentPage, this.onChangePage});

  @override
  Widget build(BuildContext context) {
    return Container(
      height: 44,
      color: Colors.white,
      child: ListView.builder(
        itemBuilder: (context, index) {
          return _TabItem(index, index == this.currentPage, () {
            this.onChangePage?.call(index);
          });
        },
        itemCount: _tabDatas.length,
        scrollDirection: Axis.horizontal,
      ),
    );
  }

  @override
  Size get preferredSize => Size.fromHeight(44);
}

class _TabItem extends StatelessWidget {
  final int index;
  final bool selected;
  final Function onSelect;

  _TabItem(this.index, this.selected, this.onSelect);

  @override
  Widget build(BuildContext context) {
    return GestureDetector(
      onTap: () {
        onSelect();
      },
      child: Padding(
        padding: const EdgeInsets.only(left: 16.0, right: 16.0),
        child: Center(
          child: Text(
            _tabDatas[index],
            style: TextStyle(
              fontSize: 16,
              fontWeight: FontWeight.bold,
              color: selected ? Colors.blue : Colors.grey.shade400,
            ),
          ),
        ),
      ),
    );
  }
}

class _Page0 extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Container(
      color: Colors.pink,
      child: Center(
        child: Text(
          'Home',
          style: TextStyle(
            fontSize: 24,
            color: Colors.white,
          ),
        ),
      ),
    );
  }
}

class _Page1 extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return ListView.builder(
      itemBuilder: (context, index) {
        return Container(
          height: 44,
          padding: EdgeInsets.only(left: 12),
          alignment: Alignment.centerLeft,
          child: Text(
            'Index - $index',
            style: TextStyle(
              fontSize: 16,
              color: Colors.blue,
            ),
          ),
        );
      },
      itemCount: 100,
    );
  }
}

class _Page2 extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Container(
      color: Colors.pink,
      child: Center(
        child: Text(
          'Body2',
          style: TextStyle(
            fontSize: 24,
            color: Colors.white,
          ),
        ),
      ),
    );
  }
}
